import React, { useContext } from 'react';
import { Button, Input } from 'antd';
import { StatusContext } from '@/views/MaterialsView/context';
import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { observer } from 'mobx-react-lite';

interface EditorProps {
  configKey: string;
  id: string;
  status: string[];
  isShow: boolean;
  editCom: React.FC<any>; // 假设editCom是一个React组件类型
}

const OptionEditor: React.FC<EditorProps> = observer(({ configKey, status }) => {
  console.log('渲染选择组件', status);
  // const [textArr, setText] = useState(status);
  const { updateStatus } = useContext(StatusContext);
  const addOptionHandle = () => {
    updateStatus(configKey);
  };
  const rmOptionHandle = (index: number) => {
    console.log(index);
    updateStatus(configKey, index);
  };

  const inputHandle = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, index: number) => {
    updateStatus(configKey, { value: e.target.value, index });
  };

  return (
    <div>
      <div className="flex items-center m-b-2">
        <div className="m-r-2">题目选项</div>
        <Button size="small" icon={<PlusCircleOutlined />} onClick={addOptionHandle}></Button>
      </div>
      {status.map((item, index) => (
        <div key={index} className="flex items-center m-b-2">
          <Input value={item} onChange={e => inputHandle(e, index)} placeholder="选项" className="m-r-2" />
          <Button size="small" icon={<MinusCircleOutlined />} onClick={() => rmOptionHandle(index)}></Button>
        </div>
      ))}
    </div>
  );
});

export default OptionEditor;
